<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"  content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title> Add multiple label classes to a layer | Sample | ArcGIS API for JavaScript
        4.18 </title>

    <link  rel="stylesheet"  href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <!--Arcade 表达式根据指示风向的罗盘度数的字段确定风吹的罗盘方向。这是附加到风速-->
    <script type="text/plain" id="wind-direction">
      var DEG = $feature.WIND_DIRECT;
      var SPEED = $feature.WIND_SPEED;
      var DIR = When( SPEED == 0, "",
        (DEG < 22.5 && DEG >= 0) || DEG > 337.5, "N",
        DEG >= 22.5 && DEG < 67.5, "NE",
        DEG >= 67.5 && DEG < 112.5, "E",
        DEG >= 112.5 && DEG < 157.5, "SE",
        DEG >= 157.5 && DEG < 202.5, "S",
        DEG >= 202.5 && DEG < 247.5, "SW",
        DEG >= 247.5 && DEG < 292.5, "W",
        DEG >= 292.5 && DEG < 337.5, "NW", "" );
      return SPEED + " mph " + DIR;
    </script>

    <script>
        require([
            "esri/WebMap",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Bookmarks"
        ], function (WebMap, MapView, FeatureLayer, Bookmarks) {

            const view = new MapView({
                container: "viewDiv",
                map: new WebMap({
                    portalItem: {
                        id: "f0e331d7986041ba8267298f579b3afe"
                    }
                })
            });

            const layer = new FeatureLayer({
                url:  "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-marker",//点的标记
                        color: [255, 255, 255, 0.6],
                        size: 4,
                        outline: {
                            color: [0, 0, 0, 0.4],
                            width: 0.5
                        }
                    }
                },
                labelingInfo: [
                    //根据 STATION_NAME 字段输出车站名称的 Arcade 表达式
                    {
                        labelPlacement: "below-right",
                        labelExpressionInfo: {
                            expression: "$feature.STATION_NAME",
                        },
                        minScale: 2500000,
                        symbol:createTextSymbol("black")
                    },
                    {
                        labelExpressionInfo: {
                            expression:  "$feature.R_HUMIDITY + '% RH'"
                        },
                        labelPlacement: "below-left",
                        minScale: 2500000,
                        symbol:createTextSymbol("#c17c47")
                    },
                    {
                        labelExpressionInfo: {
                            expression: "Round($feature.TEMP) + '° F';"
                        },
                        labelPlacement: "above-left",
                        where: "TEMP > 32",
                        symbol:createTextSymbol("#f47742")
                    },
                    {
                        labelExpressionInfo: {
                            expression: tempArcade
                        },
                        labelPlacement: "above-left",
                        where: "TEMP <= 32",
                        symbol:createTextSymbol("#4792c1")
                    },
                    {
                        labelExpressionInfo: {
                            expression: document.getElementById("wind-direction").text
                        },
                        labelPlacement: "above-right",
                        minScale: 2500000,
                        symbol :createTextSymbol("#3ba53f")
                    }
                ]
            });

            view.map.add(layer);

            //用于创建要在标注分类中使用的文本符号的函数
            function createTextSymbol(color) {
                return {
                    type: "text", // autocasts as new TextSymbol()
                    font: {
                        size: 12,
                        weight: "bold"
                    },
                    color: "white",
                    haloColor: color,
                    haloSize: 1
                };
            }


            //书签是保存的地图范围，允许最终用户使用书签小部件快速导航到感兴趣的特定区域。它们通常被定义为WebMap 的一部分。
            const bookmarks = new Bookmarks({
                view: view
            });

            //将小部件添加到视图的右上角
            view.ui.add(bookmarks, {position: "top-right" });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
